<template>
  <div>
    <!-- 登录页面 -->
    <div class="login" v-show="step == 'login'">
      <div class="top_nav">
        <div class="nav">
          <span @click="back" class="iconfont icon-youjiantou1"></span>
          <i>登陆</i>
        </div>
        <div class="notice">
          <div class="icon">
            <span class="iconfont icon-7"></span>
          </div>
          <p class="content">新用户免费看<span>5天</span></p>
        </div>
      </div>
      <!-- 登陆表单 -->
      <div class="from">
        <div class="phone">
          <span class="iconfont icon-shouji"></span>
          <input type="text" v-model="phone" placeholder="手机号码" />
        </div>
        <div class="pwd">
          <span class="iconfont icon-lock-full"></span>
          <input type="password" v-model="pwd" placeholder="密码" />
        </div>

        <div class="submit" @click="login">登陆</div>
        <div class="forget_register">
          <span class="forget">忘记密码</span>
          <span class="register" @click="step = 'registerOne'">手机号注册</span>
        </div>
      </div>

      <div class="bottom_methods">
        <div class="methods">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shejiaotubiao-42"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weixin"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-mail"></use>
          </svg>
        </div>
        <div class="agreement">
          <input type="checkbox" name="" id="" />
          <p>
            您已同意
            <span> "服务条款"</span
            >、<span>"隐私条款"</span>、和<span>"网易云阅读"</span>、<span
              >"儿童个人信息保护规则及监护人须知"</span
            >
          </p>
        </div>
      </div>
    </div>
    <!-- 注册页面 -->

    <div class="register" v-show="step == 'registerOne'">
      <div class="top_nav">
        <div class="nav">
          <span
            class="iconfont icon-youjiantou1"
            @click="step = 'login'"
          ></span>
          <i>手机号注册</i>
        </div>
      </div>
      <!-- 登陆表单 -->
      <div class="from">
        <p>手机号登录需要验证你的手机号码,该号码不会对其它人公开.</p>
        <div class="phone">
          <span class="iconfont icon-shouji"></span>
          <input type="text" placeholder="手机号码" />
        </div>
        <div class="mix_code">
          <input type="text" v-model="inputCode" />
          <mix-code
            @get-identify-code="getIdentifyCode"
            class="mix_canvas"
          ></mix-code>
        </div>

        <div class="next" @click="regMixCode">下一步</div>
      </div>
    </div>

    <!-- 验证码校验页面 -->
    <div class="codeRep" v-show="step == 'registerTwo'">
      <div class="top_nav">
        <div class="nav">
          <span
            class="iconfont icon-youjiantou1"
            @click="step = 'registerOne'"
          ></span>
          <i>手机号注册</i>
        </div>
      </div>
      <div class="from">
        <p>*已经向手机号18819777919发送了验证短信</p>
        <div class="yzm">
          <span class="iconfont icon-shouji"></span>
          <input type="text" placeholder="验证码" />
          <span class="time"> 60s</span>
        </div>
        <div class="next">下一步</div>
      </div>
    </div>
  </div>
</template>
<script>
import MixCode from "../../components/mixcode/MixCode.vue";
export default {
  components: { MixCode },
  data() {
    return {
      phone: null,
      pwd: null,
      mixCode: "",
      inputCode: "",
      step: "login",
    };
  },
  methods: {
    login() {
      if (this.phone == "18819777919" && this.pwd == "csl520123") {
        this.$router.push({ name: "my" });
      } else {
        this.$toast.fail({
          message: "账号,密码有误",
          position: "bottom",
        });
      }
    },
    back() {
      this.$router.go(-1);
    },
    regMixCode() {
      this.inputCode == this.mixCode
        ? (this.step = "registerTwo")
        : this.$toast.fail({
            message: "验证码错误",
            position: "bottom",
          });
    },
    getIdentifyCode(event) {
      this.mixCode = event;
    },
  },
};
</script>

<style lang="less" scoped>
.login,
.register,
.codeRep {
  //头部栏
  .top_nav {
    background-color: #fff;
    padding: 0 30px 0 13px;
    .nav {
      display: flex;
      align-items: center;
      height: 35px;
      span {
        color: #706e6b;
        font-size: 15px;
        font-weight: 600;
      }
      i {
        font-size: 18px;
        flex: 1;
        display: block;
        width: 100%;
        text-align: center;

        font-style: none;
      }
    }
    .notice {
      height: 40px;
      padding: 0 28px;
      display: flex;
      align-items: center;
      .icon {
        background: #f2f2f2;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          color: #868686;
          font-size: 12px;
        }
      }
      p {
        margin-left: 5px;
        font-size: 13px;
        color: #989898;
        span {
          color: #f46868;
        }
      }
    }
  }
  //登陆表单
  .from {
    padding: 0 30px;
    margin-top: 40px;
    .phone,
    .pwd,
    .mix_code,
    .yzm {
      width: 100%;
      height: 40px;
      margin-top: 13px;
      position: relative;
      .iconfont {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 17px;
        color: #b6b6b6;
      }
      input[type="text"],
      input[type="password"] {
        padding-left: 40px;
        width: 100%;
        height: 100%;
        outline: none;
        border: 1px solid #dcdcdc;
        font-size: 14px;
        color: #cfcfcf;
        border-radius: 18px;
        z-index: 1;
      }
    }
    .submit,
    .next {
      width: 100%;
      height: 40px;
      color: #fff;
      line-height: 40px;
      text-align: center;
      background-color: #f0a494;
      border-radius: 20px;
      font-size: 15px;
      margin-top: 20px;
    }

    //忘记密码
    .forget_register {
      display: flex;
      height: 45px;
      justify-content: space-between;
      align-items: center;
      .forget {
        color: #a5a5a5;
        font-size: 13px;
      }
      .register {
        color: #eb765f;
        font-size: 13px;
      }
    }
  }

  .bottom_methods {
    margin-top: 260px;
    padding: 0 50px;
    .methods {
      display: flex;
      justify-content: space-between;
      height: 50px;

      .icon {
        width: 30px;
        height: 30px;
      }
    }
    .agreement {
      display: flex;
      align-items: center;
      p {
        width: 100%;
        font-size: 12px;
        color: #868686;
        text-align: center;
        span {
          color: #3281d7;
        }
      }
    }
  }
}
.register {
  p {
    color: #c2c2c2;
    white-space: nowrap;
    font-size: 12px;
    transform: scale(0.9) translateX(-15px);
  }
  .mix_code {
    position: relative;
    input[type="text"] {
      padding-left: 20px !important;
    }
    .mix_canvas {
      width: 30px;
      height: 100%;
      position: absolute;
      right: 110px;
      top: 0;
    }
  }
  .next {
    background-color: #e64d2e !important;
  }
}
.codeRep {
  p {
    color: #c2c2c2;
    white-space: nowrap;
    font-size: 12px;
    transform: scale(0.9) translateX(-15px);
  }
  .from {
    .time {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      color: #868686;
      &::after {
        content: "";
        position: absolute;
        width: 1px;
        top: -9px;
        right: 50px;
        height: 30px;
        background-color: #f9f9f9;
      }
    }
  }
}
</style>